<template>
	<view class="content">
		<view class="col-24 wtqk">
			<view class="col-24">
				<image src="../../static/account/bg.png" mode="scaleToFill"></image>
			</view>
			<view class="col-24 name t_center t_size_bold">
				{{title}}
			</view>
		</view>
		<view class="row clnr">
			<view class="col-24">
				<view class="row clnrkt">
					<view class="pdl-1 col-7 t_size_bold">
						问题行程
					</view>
				</view>
				<view class="clnrxq row">
					<view class="col-3">
						<view class="col-24 t_size_bold t_center ycsj">
							·
						</view>
						<view class="slh">
							
						</view>
						<view class="col-24 t_size_bold t_center ycqd">
							·
						</view>
						<view class="slh">
							
						</view>
						<view class="col-24 t_size_bold t_center yczd">
							·
						</view>
					</view>
					<view class="col-20">
						<view class="col-24 ycsj">
							<view class="row">
								<view class="col-18">
									约车 2021-10-20 10:00
								</view>
								<view class="col-6 t_right status">
									已完成
								</view>
							</view>
						</view>
						<view class="col-24 ycqd">
							世贸大厦
						</view>
						<view class="col-24 yczd">
							郑州之森东4门
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="row clnrt">
			<view class="col-24">
				<view class="row clnrkt">
					<view class="pdl-1 col-7 t_size_bold">
						填写问题描述
					</view>
				</view>
				<view class="clnrxq row">
					<view class="pdl-1 col-22 pdr-1">
						<textarea v-model="obgVallede.remarks" placeholder="请详细描述行程中您遇到的问题" />
					</view>
				</view>
			</view>
		</view>
		<view class="row clnrt">
			<view class="col-24">
				<view class="row clnrkt">
					<view class="pdl-1 col-7 t_size_bold">
						上传凭证
					</view>
				</view>
				<view class="clnrxq row">
					<view class="pdl-1 col-22 pdr-1 clnrxqjs">
						只支持jpg、png格式，一次最多上传5张，每张照片不大于500kb，若超过此险种，请直接联系客服。
					</view>
					<view class="pdl-1 col-22 pdr-1 ">
						<view class="col-24">
							<view class="row img">
								<view class="col-7 set-1" v-for="(item,index) in arrImg" :key="index">
									<image :src="item" mode="scaleToFill" @click="preImage(index)"></image>
								</view>
								<view class="col-7 set-1" v-if="arrImg.length < 3">
									<image src="../../static/account/sczp.png" @click="upFile()" mode="scaleToFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="row btn">
			<view class="pdl-1 pdr-1 col-22">
				<button type="primary" @click="submit()">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				obgVallede: {
					"orderId": 0,
					"remarks": "",
					"typeId": 0,
					"voucherImages": ""
				},
				title: '',
				arrImg: []
			}
		},
		onLoad(option) {
			this.obgVallede.orderId = option.orderId;
			this.obgVallede.typeId = option.typeId;
			this.title = option.title;
		},
		methods:{
			upFile(){
				let that = this;
				uni.chooseImage({
					count:1,
					success(res) {
						uni.uploadFile({
							url: that.$api.baseUrl + that.$api.public.imagesUp,
							file:res.tempFiles[0],
							filePath:res.tempFilePaths[0],
							name:'file',
							header:{
								'Authorization': uni.getStorageSync('token')
							},
							complete(e) {
								if(e.statusCode == 200){
									that.arrImg.push(JSON.parse(e.data).data);
								}
							}
						})
					}
				})
			},
			async submit(){
				if(this.obgVallede.remarks == ''){
					this.$public.showToast('请填写问题描述');
					return	
				}
				this.arrImg.forEach((item,index) => {
					if(index == this.arrImg.length-1){
						this.obgVallede.voucherImages += item
					}else{
						this.obgVallede.voucherImages += `${item},`
					}
				})
				let res = await this.$api.request(this.$api.customer.feedback_info,this.obgVallede);
				if(res.feedbackId){
					this.$public.showToast('反馈成功');
					let that = this;
					setTimeout(()=>{
						that.$public.redTo('account/account_cljdxq?feedbackId=' + res.feedbackId)
					},800)
				}
			},
			preImage(index){
				uni.previewImage({
					current: index,
					count:this.arrImg.length,
					urls:this.arrImg,
					indicator: 'default'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding-bottom: 150rpx;
	}
	page{
		background-color: #f5f5f5;
	}
	.wtqk{
		position: relative;
		height: 150rpx;
		image{
			width: 100%;
			height: 150rpx;
		}
		.name{
			color: #FFFFFF;
			font-size: 39rpx;
			height: 150rpx;
			line-height: 150rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.clnr,
	.clnrt{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		.clnrkt{
			height: 96rpx;
			line-height: 96rpx;
			color: #333333;
			border-bottom: 1px solid #ededed;
			.t_size_bold{
				overflow: hidden;
			}
			.col-15{
				color: #B3B3B3;
			}
		}
		.clnrxq{
			padding: 45rpx 0;
			.col-3{
				.slh{
					width: 1px;
					height: 40rpx;
					border-left: 1px dotted #999999;
					margin: 0 calc((100% - 1px) / 2);
				}
				.col-24{
					height: 15rpx;
					line-height: 15rpx;
					font-size: 45rpx;
				}
				.ycsj{
					color: #FFAE00;
				}
				.ycqd{
					color: #6CBF30;
				}
				.yczd{
					color: #07B0FF;
				}
			}
			.col-20{
				color: #333333;
				.ycsj{
					height: 30rpx;
					line-height: 15rpx;
					.status{
						color: #999999;
					}
				}
				.ycqd{
					height: 60rpx;
					line-height: 60rpx;
				}
				.yczd{
					height: 50rpx;
					line-height: 50rpx;
				}
			}
			.clnrxqjs{
				color: #999999;
			}
			textarea{
				width: 92%;
				height: 170rpx;
				padding: 15rpx 4%;
				background-color: #F5F5F5;
				border-radius: 10rpx;
			}
			.img{
				margin-top: 30rpx;
				image{
					width: 100%;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
	.clnrt{
		margin-top: 30rpx;
	}
	.btn{
		width: 92%;
		padding: 0 4%;
		height: 120rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		button{
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			margin-top: 20rpx;
			background-color: #6CBF30;
		}
	}
</style>
